<template>
    <div class="set-control-page" v-loading="pageLoading">
        <el-scrollbar>
            <div class="set-control-box">
                <div class="control-right">
                    <div class="total-box">
                        <div class="control-item base-box">
                            <div class="user-version-box">
                                <img :src="userInfo.headImg">
                                <div class="name-version">
                                    <div>{{ userInfo.realName }}</div>
                                    <div></div>
                                </div>
                            </div>
                            <div class="count-box">
                                <div class="count-item">
                                    <div class="num">{{ fileView }}</div>
                                    <div>{{ $t('message.text.totalNumber') }}</div>
                                </div>
                                <div class="line"></div>
                                <div class="count-item">
                                    <div class="num">{{ fileDown }}</div>
                                    <div>{{ $t('message.text.totalDownload') }}</div>
                                </div>
                                <div class="line"></div>
                                <div class="count-item">
                                    <div class="num">{{ fileSize }}</div>
                                    <div>{{ $t('message.text.fileSize') }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="control-item count-box">
                            <div class="count-item sum-box">
                                <div class="num">{{ articleCount }}</div>
                                <div>{{ $t('message.text.totalDocumentNumber') }}</div>
                            </div>
                            <div class="count-item">
                                <div class="tag user">{{ $t('message.typeMenu.private') }}</div>
                                <div class="num">{{ knowledgeCount.user || 0 }}</div>
                                <div>{{ $t('message.text.privateNumber') }}</div>
                            </div>
                            <div class="count-item">
                                <div class="tag all">{{ $t('message.typeMenu.wholeNetwork') }}</div>
                                <div class="num">{{ knowledgeCount.all || 0 }}</div>
                                <div>{{ $t('message.text.onlineNumber') }}</div>
                            </div>
                            <div class="count-item">
                                <div class="tag regs">{{ $t('message.typeMenu.enterprise') }}</div>
                                <div class="num">{{ knowledgeCount.register || 0 }}</div>
                                <div>{{ $t('message.text.emterpriseNumber') }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="control-item add-doc-box-item">
                        <div class="title-box">
                            <span>{{ $t('message.text.addDocument') }}</span>
                            <div style="width:250px;">
                                <el-date-picker style="width:230px;" @change="timeChage" v-model="dateTime"
                                    type="daterange" range-separator="~"
                                    :start-placeholder="$t('message.placeholder.datePickerStart')"
                                    :end-placeholder="$t('message.placeholder.datePickerEnd')" value-format="YYYY-MM-DD"
                                    :popper-options="{
                                        modifiers: [
                                            {
                                                name: 'flip',
                                                options: {
                                                    fallbackPlacements: ['bottom'],
                                                    allowedAutoPlacements: ['bottom'],
                                                }
                                            }
                                        ]
                                    }" />
                            </div>
                        </div>
                        <Echarts id="addDocChart" class="add-doc-box" height="calc(100% - 33px)"
                            :fullOptions="docAddOptions" :loading="docAddLoading"></Echarts>
                    </div>
                    <div class="control-item">
                        <div class="title-box">
                            <span>{{ $t('message.text.documentOverview') }}</span>
                        </div>
                        <Echarts id="docTypeChart" class="doc-type-box" height="calc(100% - 25px)"
                            :fullOptions="docTypeOptions" :loading="docTypeLoading"></Echarts>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'

import { useRouter } from "vue-router"
import { getStore } from '@/utils/store'
import { getDownViewNum, getFilSize, getControl, getStatistics } from '@/api/common'
import Echarts from '@/views/common/echarts.vue'
import { chartOption } from '@/views/common/chartOptions'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const router = useRouter();
const { proxy } = getCurrentInstance()
const userInfo = getStore({ name: 'userInfo' })
const fileView = ref(0)
const fileDown = ref(0)
const fileSize = ref(0)
const articleCount = ref(0)
const dateTime = ref('')
const docType = {
    'document_flow': $t('message.typeMenu.processDoc'),
    'document_html': $t('message.typeMenu.textDoc'),
    'document_map': $t('message.typeMenu.mindMapDoc'),
    'document_unrecognized': $t('message.typeMenu.other'),
    'document_upload': $t('message.typeMenu.other'),
    'document_xlsx': $t('message.typeMenu.formDoc'),
    'office_doc': $t('message.typeMenu.word'),
    'office_pdf': $t('message.typeMenu.pdf'),
    'office_ppt': $t('message.typeMenu.ppt'),
    'office_xlsx': $t('message.typeMenu.excel'),
    'url_address': $t('message.typeMenu.urlDocument'),
    'office_csv': $t('message.text.csv'),
    'xmind': $t('message.text.xmind'),
    'md': $t('message.text.word')
}
interface timeObj {
    startTime: string | undefined,
    endTime: string | undefined
}
const timeobj = ref<timeObj>({
    startTime: undefined,
    endTime: undefined
})
const knowledgeCount = ref({
    user: 0,
    register: 0,
    all: 0
})
const pageLoading = ref(false)
const monthData = ref([])
const docTypeData = ref([])
const docAddLoading = ref(true)
const docTypeLoading = ref(true)
const xAxisData = ref([])
const docAddOptions = reactive({
    options: {},
    init: false
})
const docTypeOptions = reactive({
    options: {},
    init: false
})
onMounted(() => {
    init()
    initMap()
})
async function init() {
    pageLoading.value = true
    docTypeLoading.value = true
    let res = await getControl()
    let resSize = await getFilSize(0)
    let resDownView = await getDownViewNum(-1)
    fileView.value = resDownView.data.data.SEE || 0
    fileDown.value = resDownView.data.data.DOWNLOAD || 0
    fileSize.value = resSize.data.data
    articleCount.value = res.data.data.articleCount
    knowledgeCount.value = res.data.data.knowledgeCount
    let other = 0
    for (let key in res.data.data.articleGroupCount) {
        if (key != 'document_unrecognized' && key != 'document_upload') {
            docTypeData.value.push({
                year: docType[key],
                value: res.data.data.articleGroupCount[key],
            })
        } else {
            other += res.data.data.articleGroupCount[key]
        }
    }
    docTypeData.value.push({
        year: $t('message.typeMenu.other'),
        value: other,
    })
    initBarMap()
    pageLoading.value = false
}
function initBarMap() {
    docTypeOptions.options = chartOption.barOption(docTypeData.value, ['year', 'value'])
    docTypeLoading.value = false
}
function initMap() {
    docAddLoading.value = true
    if (dateTime.value && dateTime.value.length > 0) {
        timeobj.value.startTime = dateTime.value[0]
        timeobj.value.endTime = dateTime.value[1]
    } else {
        timeobj.value.startTime = null
        timeobj.value.endTime = null
    }
    getStatistics(timeobj.value).then(res => {
        if (res.data.code == 0 && res.data.data) {
            monthData.value = []
            for (let key in res.data.data.monthCount) {
                monthData.value.push({
                    year: `${key}${$t('message.text.month')}`,
                    value: res.data.data.monthCount[key],
                })
            }
            initLineMap()
        }
    })
}
function initLineMap() {
    xAxisData.value = []
    monthData.value.forEach((item, index) => {
        xAxisData.value.push({
            value: item.year,
            textStyle: {
                align: index == 0 ? 'left' : (index == monthData.value.length - 1) ? 'right' : 'center'
            }
        })
    })
    docAddOptions.options = chartOption.lineOption(monthData.value, ['year', 'value'], xAxisData.value)
    docAddLoading.value = false
}
function timeChage(val) {
    initMap()
}
</script>
<style lang="scss" scoped>
.set-control-page {
    position: relative;
    height: 100%;
    width: 100%;

    ::v-deep(.el-scrollbar__view) {
        height: 100%;
    }

    .set-control-box {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 16px 24px 24px 0px;
        box-sizing: border-box;

        .control-left {
            display: grid;
            grid-row-gap: 16px;
            // width:460px;
            grid-template-rows: 196px 1fr;

            .base-box {
                .user-version-box {
                    // margin-top: 16px;
                    display: flex;
                    align-items: center;

                    img {
                        width: 56px;
                        height: 56px;
                        border-radius: 10px;
                        margin-right: 16px;
                    }
                }

                .count-box {
                    margin-top: 16px;
                    height: 96px;
                    border-radius: 6px;
                    background-color: #f5f6f7;
                    display: flex;
                    align-items: center;

                    .count-item {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        min-width: 136px;
                        width: calc((100% - 2px) / 3);
                        font-size: 14px;
                        color: #6f7588;
                        @include SourceHanSansCN-Regular;

                        .num {
                            color: #363B4C;
                            font-size: 20px;
                            @include SourceHanSansCN-Bold;
                        }
                    }

                    .line {
                        width: 1px;
                        height: 48px;
                        background-color: #d7d8db;
                        border-radius: 6px;
                    }
                }
            }
        }

        .control-right {
            display: grid;
            grid-row-gap: 16px;
            height: 100%;
            // width:460px;
            grid-template-rows: 196px 1fr 1fr;

            .total-box {
                display: grid;
                grid-column-gap: 16px;
                grid-template-columns: minmax(460px, 1fr) minmax(700px, 2fr);

                .base-box {
                    box-sizing: border-box;

                    .user-version-box {
                        // margin-top: 16px;
                        display: flex;
                        align-items: center;

                        img {
                            width: 56px;
                            height: 56px;
                            border-radius: 10px;
                            margin-right: 16px;
                        }
                    }

                    .count-box {
                        margin-top: 16px;
                        height: 96px;
                        border-radius: 6px;
                        background-color: #f5f6f7;
                        display: flex;
                        align-items: center;
                        grid-column-gap: 0px !important;

                        .count-item {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            flex-direction: column;
                            height: auto !important;
                            min-width: 136px;
                            width: calc((100% - 2px) / 3);
                            font-size: 14px;
                            color: #6f7588;
                            @include SourceHanSansCN-Regular;

                            .num {
                                color: #363B4C;
                                font-size: 20px;
                                @include SourceHanSansCN-Bold;
                            }
                        }

                        .line {
                            width: 1px;
                            height: 48px;
                            background-color: #d7d8db;
                            border-radius: 6px;
                        }
                    }
                }

                .count-box {
                    display: grid;
                    grid-template-columns: 1.6fr 1fr 1fr 1fr;
                    grid-column-gap: 16px;

                    .count-item {
                        height: 164px;
                        background: #F5F6F7;
                        border-radius: 6px;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-direction: column;
                        font-size: 16px;
                        @include SourceHanSansCN-Regular;

                        .tag {
                            width: 40px;
                            height: 24px;
                            border-radius: 5px 0px 5px 0px;
                            @include SourceHanSansCN-Regular;
                            position: absolute;
                            left: 0px;
                            top: 0px;
                            font-size: 12px;
                            text-align: center;
                            line-height: 24px;
                        }

                        .user {
                            color: #FF194C;
                            background: #FFE7ED;
                        }

                        .all {
                            color: #1E6FFF;
                            background: #E8F0FF;
                        }

                        .regs {
                            color: #36B452;
                            background: #E9F7EC;
                        }

                        .num {
                            color: #363B4C;
                            font-size: 32px;
                            @include SourceHanSansCN-Bold;
                        }
                    }

                    .sum-box {
                        background: #1E6FFF;
                        color: #fff;

                        .num {
                            color: #fff;
                        }
                    }
                }
            }

        }

        .control-item {
            background: #FFFFFF;
            border-radius: 6px;
            padding: 16px 24px;

            // height: 100%;
            .title-box {
                color: #363B4C;
                font-size: 16px;
                @include SourceHanSansCN-Bold;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .add-doc-box {
                width: 100%;
            }

            .doc-type-box {
                width: 100%;
            }
        }

        .add-doc-box-item {
            padding: 16px 0px 16px 24px !important;

            .title-box {
                margin-right: 24px;
            }
        }
    }
}
</style>